import React from "react"
import {withRouter} from 'react-router-dom'
import {connect,} from 'react-redux'
import './MsgFollowAndWallet.css'
// antd-mobile
import {Flex, Badge} from "antd-mobile"

// assets
import msgIcon from '../../../../res/images/web/my/message@2x.png'
// import followIcon from '../../../../res/images/web/my/follow.png'
import topicIcon from '../../../../res/images/web/my/huati@2x.png'
import walletIcon from '../../../../res/images/web/my/wallet@2x.png'
import dingdanIcon from '../../../../res/images/web/my/dingdan@2x.png'
import proIcon from '../../../../res/images/web/my/zhuanjia@2x.png'
import gifIcon from '../../../../res/images/web/my/gift@2x.png'

import LocalStorageService from "../../../../utils/LocalStorageService";

class MsgFollowAndWallet extends React.Component {
    constructor(props) {
        super(props)
        this.isLogin = LocalStorageService.get('isLogin')
        this.uid = LocalStorageService.get('userid')
    }

    componentDidMount() {

        const isLogin = this.isLogin
        if (isLogin) {
            this.fetchUserDetail()
                .then((val) => {
                    if (val) {
                        this.fetchMsgState()
                        this.fetchTopicState()
                        this.fetchVodState()
                    }
            })
        }

    }

    componentWillUnmount() {
        this.clear()
    }

    fetchUserDetail = () => {
        const uid = this.uid
        const login = this.isLogin
        if (login) {
            return this.props.fetchUserDetail({uid,})
        }
    }

    fetchTopicState = () => {
        const uid = this.uid
        this.props.doGetMyTopicState({uid,})
    }

    fetchVodState = () => {
        const uid = this.uid
        this.props.doGetMyVodState({uid,})
    }

    fetchMsgState = () => {
        const uid = this.uid
        const freshInterval = 15000
        this.props.doFetchMsgState({uid,})
        this.fresh = setInterval(() => {
            this.props.doFetchMsgState({uid,})
        }, freshInterval)
    }

    clear = () => {
        this.fresh && clearInterval(this.fresh)
    }

    renderList = (list) => {
        return list.map(item => {
            const icon = (
                <div className='my-menu-icon'>
                    <Badge dot={item.unRead}>
                        <img src={item.iconUrl} alt={item.title} style={{width: '50px', height: '50px',}}/>
                    </Badge>
                </div>
            )

            const title = (
                <p>{item.title}</p>
            )

            return (
                <Flex.Item key={item.title} onClick={() => {this.props.history.push(item.path)}}>
                    <div style={{textAlign: 'center', padding: '12px'}}>
                        {icon}
                        {title}
                    </div>
                </Flex.Item>
            )
        })
    }

    render() {
        const {history, msg, topic, user: {userdetail},} = this.props
        const {msgState,} = msg
        const {state: topicState, vodState,} = topic
        const newMsg = msgState.some(v => v > 0)
        const newTopicMsg = topicState.some(v => v > 0) || vodState.some(v => v > 0)

        const isPro = userdetail.Specialist === 1
        const proInfoFullFilled = userdetail.Goodat && userdetail.Goodat.length > 0
        const list = [
            {
                iconUrl: msgIcon,
                title: '消息',
                unRead: newMsg,
                path: 'msg',
            },
            {
                iconUrl: topicIcon,
                title: '互动',
                unRead: newTopicMsg,
                path: 'my-topic',
            },
            {
                iconUrl: proIcon,
                title: isPro && proInfoFullFilled ? '专家号' : '专家申请',
                unRead: false,
                path: isPro && proInfoFullFilled ? 'my_pro_plan_page' : 'pro_apply',
            },

            {
                iconUrl: walletIcon,
                title: '方案订单',
                unRead: false,
                path: 'my_plan',
            },
            // {
            //     iconUrl: walletIcon,
            //     title: '钱包',
            //     unRead: false,
            //     path: 'wallet',
            // },
            // {
            //     iconUrl: gifIcon,
            //     title: '礼物',
            //     unRead: false,
            //     path: 'gift',
            // },
        ]


        return (
            <div style={{backgroundColor: '#fff', borderRadius: '8px',}}>
                <Flex style={{backgroundColor: '#fff', borderRadius: '8px',}}>
                    {/*{template}*/}
                    {/*{this.renderList(list.slice(0, 3))}*/}
                    {this.renderList(list)}
                </Flex>
                {/*<Flex>*/}
                {/*    /!*{template}*!/*/}
                {/*    {this.renderList(list.slice(3, list.length))}*/}
                {/*</Flex>*/}
            </div>
        )
    }
}

const mapState = state => ({
    user: state.user,
    msg: state.msg,
    topic: state.topic,
})

const mapDispatch = dispatch => ({
    fetchUserDetail: (payload) => dispatch.user.fetchUserDetail(payload),
    doFetchMsgState: (payload) => dispatch.msg.doFetchMsgState(payload),
    doGetMyTopicState: (payload) => dispatch.topic.doGetMyTopicState(payload),
    doGetMyVodState: (payload) => dispatch.topic.doGetMyVodState(payload),
})


export default connect(mapState, mapDispatch)(withRouter(MsgFollowAndWallet))
